<template>
  <div class="dy-main AccountAddCard3">
    <div class="dy-header">
      <x-header title="添加卡片" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <group gutter="0.05rem">
        <cell title="银行卡号" v-model="cardNo" label-width="2.05rem" class="cell slot-bright"></cell>
      </group>
      <group gutter="0.2rem">
        <x-input title="持卡人姓名" placeholder="请输入持卡人姓名" v-model="cardholder" label-width="2.05rem" class="cell"></x-input>
        <cell title="证件类型" is-link :value="IDType" @click.native="selectIDType" label-width="2.05rem" class="cell slot-bright">
        </cell>
        <cell title="激活码途径" label-width="2.05rem" class="cell slot-bright">
          <div child class="selectContainer">
            <a @click="mobilClick">
            <div class="select" @click="mobilClick" style="vertical-align: middle;" :class="ctivationCodeQueryMethod === 1?'selected':''">
            </div><p class="fot26">手机号</p>
            </a>
            <a @click="emailClick">
            <div class="select"  style="vertical-align: middle;" :class="ctivationCodeQueryMethod === 0?'selected':''">
            </div><p class="fot26">电子邮箱</p>
            </a>
          </div>
        </cell>
        <x-input title="证件号码" placeholder="请输入证件号码" label-width="2.05rem" class="cell" v-model="IDNo"><img class="imgCamera" slot="right" src="../../assets/img/Account/camera.png" alt="" ></x-input>
        <x-input title="手机号" placeholder="请输入手机号" label-width="2.05rem" v-model="mobilNum" class="cell" v-if="ctivationCodeQueryMethod===1"></x-input>
        <x-input title="电子邮箱" placeholder="请输入电子邮箱" label-width="2.05rem" v-model="email" class="cell" v-if="ctivationCodeQueryMethod===0"></x-input>
        <x-input title="验证码" class="cell weui-vcode" v-model="smsCode" placeholder="请输入验证码" label-width="2.05rem" :show-clear="false" :min="6" :max="6" @on-change="testYzm">
          <a slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
        </x-input>
        <!--<x-input title="验证码" placeholder="请输入激活码" label-width="2.05rem" v-model="activationCode" class="cell">-->
          <!--<a slot="right" class="check-button">获取激活码</a>-->
        <!--</x-input>-->
      </group>
      <actionsheet v-model="creSwitch" :menus="menus" @on-click-menu="click" ></actionsheet>
      <toast v-model="showPositionValue" class="toastContent" type="text"><icon :type="status?'success':'warn'" time="100000" width=".32rem"></icon><span v-html= "this.status?'添加成功':'添加失败'"></span></toast>
      <x-button @click.native="goNext" type="primary" class="confirm">确认添加</x-button>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
import { Actionsheet, Toast, Icon } from 'vux'
export default{
  components: {
    Actionsheet,
    Toast,
    Icon
  },
  data () {
    return {
      cardNo: '6210 **** **** 2199',
      cardholder: '',
      IDType: '身份证',
      IDNo: '', // 证件号码
      creSwitch: false,
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      disableCode: false,
      menus: {
        menu1: '身份证',
        menu2: '军官证',
        menu3: '港澳台证',
        menu4: '护照',
        menu5: '临时身份证'
      },
      mobilNum: '', // 手机号
      email: '', // 邮箱
      ctivationCodeQueryMethod: 1, // 验证码方式1为短信
      showPositionValue: false, // 绑定toast
      status: 1, // 交互结果 1成功 2失败
      activationCode: '' // 激活码
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    selectIDType () {
      this.creSwitch = !this.creSwitch
    },
    click (key, item) {
      this.IDType = item
    },
    mobilClick: function (e) {
      if (this.ctivationCodeQueryMethod === 0) {
        this.ctivationCodeQueryMethod = 1
      }
    },
    emailClick: function (e) {
      if (this.ctivationCodeQueryMethod === 1) {
        this.ctivationCodeQueryMethod = 0
      }
    },
    goNext () {
      let _this = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'CI005002', 'user_Data': { cardNo: _this.cardNo, cardholder: _this.cardholder, IDType: _this.IDType, IDNo: _this.IDNo, mobilNum: _this.mobilNum, email: _this.email, ctivationCodeQueryMethod: _this.ctivationCodeQueryMethod }}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let returnData = response.data.data[0]
            if (returnData.status === '成功') {
              _this.showPositionValue = true
              _this.status = 1
            } else {
              // todo 失败的展示
              _this.showPositionValue = true
              _this.status = 0
            }
          } else {
            console.log('fail')
          }
        })
    },
    testYzm () {
      // todo
    },
    /*
    *  验证码发送
    */
    postCode () {
      let lVue = this
      lVue.codeText = (lVue.codeTime + 's后可重新发送')
      if (!lVue.isTime) {
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '发送验证码'
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 10
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新发送'
        }, 1000)
      }
      lVue.disableCode = true
    }
  },
  created () {
    this.goNext()
  }
}
</script>
<style lang="less">
  .AccountAddCard3 {
    .dy-body {
      .confirm{
        background-color: #ec1b30;
        width: 6.9rem;
        height: .88rem;
        margin-top: .64rem;
        font-size: .34rem;
      }
      .imgCamera {
        width:.34rem;
        height: .34rem;
        margin-left: .24rem;
        vertical-align: middle;
      }
    }
    /*radiio选项*/
    .selectContainer a{
      .select{
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        position: relative;
        display: inline-block;
        width: 0.28rem;
        height: 0.28rem;
        border: .01rem solid #bfbfbf;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        vertical-align: top;
        background-color: #ffffff;
        float: left;
        margin-top: .07rem;
        margin-right: 0.14rem;
      }
      .select:after{
        content:'';
        display: block;
        position: absolute;
        width: .18rem;
        height: .18rem;
        top: .05rem;
        left: .05rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #fff;
      }
      .select.selected:after{
        background-color: #EC1B30;
      }
      .fot26{
        display: block;
        color: #333;
        float: left;
        margin-right: .7rem;
      }
    }
    /*toast*/
    .toastContent .weui-toast{
      background-color: #ffffff;
      opacity: 1;
      top: 25%;
      color: #333333;
      font-size: .28rem;
    }
    .toastContent .weui-input{

    }
  }
</style>
